﻿/**
* 页面初始化
*/
$(document).ready(function () {
    var table = $("#datatable");
    DisplayTread(table[0], "trend");
});

// 初始化Trend Options
function InitTrendOptions(renderToDiv) {
    options = {
        chart: {
            renderTo: renderToDiv,
            defaultSeriesType: 'line',
            marginRight: 10
        },
        title: {
            text: ''
        },
        xAxis: {
            type: 'datetime',
            labels: {
                y: 20,
                formatter: function () {
                    return Highcharts.dateFormat('%y年%m月%d日', this.value) + '<br/>' + Highcharts.dateFormat('%H:%M:%S', this.value);
                }
            }
        },
        yAxis: {
            title: {
                text: ''
            }
        },
        credits: {
            enabled: false
        },
        tooltip: {
            formatter: function () {
                var _tooltip = Highcharts.dateFormat('%Y年%m月%d日 %H:%M:%S', this.x) + '<br/>' + this.y;

                var _level = "";
                if (this.point.levelIcon != undefined && this.point.levelIcon != null && this.point.levelIcon != "")
                    _level = '<img src="' + this.point.levelIcon + '" style="vertical-align:middle;" />';

                if (this.point.levelName != undefined && this.point.levelName != null && this.point.levelName != "")
                    _level += '<span style="margin-left:5px; vertical-align:middle;">' + this.point.levelName + '</span>';

                if (_level != "")
                    _tooltip += '<br/>例外等级：' + _level;
                return _tooltip;
            }
        },
        legend: {
            enabled: false
        },
        exporting: {
            enabled: false
        },
        plotOptions: {
            line: {
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    x: 10,
                    formatter: function () {
                        return '<span style="color:' + this.point.color + '">' + this.y + '</span>';
                    }
                }
            }
        },
        series: [{
            data: []
        }]
    };
    return options;
}

// 显示趋势
function DisplayTread(table, renderToDiv) {
    var options = InitTrendOptions(renderToDiv);
    // 填充数据
    $('tbody>tr', table).each(function (i) {
        var time = DatetimeParser2($('td', this)[0].innerText);
        var value = parseFloat($('td', this)[1].innerText);
        var color = $($('td', this)[1]).attr("levelColor");
        var marker = (color != undefined ? { fillColor: color, states: { hover: { fillColor: color}}} : null);
        var levelName = $($('td', this)[1]).attr("levelName");
        var levelIcon = $($('td', this)[1]).attr("levelIcon");

        options.series[0].data.push({ x: time, y: value, color: color, fill: color, marker: marker, levelName: levelName, levelIcon: levelIcon });
    });
    new Highcharts.Chart(options);
}

/**
* 根据全时间字符串得到毫秒数
* 
* value：字符串，表示时间，格式必须为2010-01-01 10:09:01
* 返回：毫秒数
*/
function DatetimeParser(value) {
    var splitDatetime = value.split(" ");
    if (splitDatetime && splitDatetime.length == 2) {
        var date = splitDatetime[0].split("-");
        var time = splitDatetime[1].split(":");
        if (date && time && date.length == 3 && time.length == 3) {
            var utcMilliseconds = Date.UTC(date[0], date[1] - 1, date[2], time[0], time[1], time[2], 0);
            return utcMilliseconds;
        }
    }
    return value;
}

/**
* 根据全时间字符串得到毫秒数
* 
* value：字符串，表示时间，格式必须为2010年01月01日 10:09:01
* 返回：毫秒数
*/
function DatetimeParser2(value) {
    value = value.replace("年", "-");
    value = value.replace("月", "-");
    value = value.replace("日", "");
    return DatetimeParser(value);
}